<template>
    <div v-show="!nodata"  ref="chartsRef"  style="height: 500px;width: 100%;"  >
        
    </div>
    <div v-if="nodata" style="height: 300px;width: 100%;display: flex;align-items: center;justify-content: center;border: 1px solid #ccc;" >
        No Data
    </div>
  </template>
  <script setup>
  import { ref, watch } from 'vue';
  import * as echarts from 'echarts'
  const chartsRef = ref(null)
  
const nodata = ref(false)
  const props = defineProps({
        visible: {
            type: Boolean,
            default: false,
        },
    })


  const options = {
    title: {
      text: '历史曲线',
      // 文字属性设置
      textStyle: {
        color: '#00e4ff'
      }
    },
    grid: {
      top: '10%',
      left: '3%',
      right: '4%',
      bottom: '10%',
      containLabel: true
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross'
      },
      padding: [5, 10]
    },
    yAxis: {
      // 设置坐标轴的 文字样式
      axisLabel: {
        color: '#bbdaff',
        margin: 20 // 刻度标签与轴线之间的距离。
      },
      // 坐标轴轴线相关设置。
      splitLine: {
        lineStyle: {
          color: '#fff'
        }
      }
    },
    xAxis: {
      splitLine: {
        show: false
      },
      // 坐标轴轴线相关设置。
      axisLine: {
        lineStyle: {
          color: 'orange'
        }
      },
      type: 'category',
      data: [],
      axisLabel: {
        // 设置坐标轴的 文字样式
        color: '#bbdaff',
        margin: 20 // 刻度标签与轴线之间的距离。
      },
      boundaryGap: false, // 设置坐标轴两边的留白 ，从刻度原点开始，
      axisTick: {
        // 取消坐标轴刻度线
        show: false
      }
    },
    series: [
      {
        name: '-',
      itemStyle: {
        color: 'red',
        lineStyle: {
          color: '#FF005A',
          width: 2
        }
      },
        symbol: 'circle',
        markLine: {
          silent: true
        },
        type: 'line',
        data: [],
        animationDuration: 2000,
      animationEasing: 'cubicInOut',
      smooth: true, // 启用平滑曲线
      showSymbol: false // 不显示数据点
      }
    ]
  }
  
  let chart = null
  const initChart = () => {
    const chart = echarts.init(chartsRef.value)
    chart.setOption(options)
    return chart
  }
  onMounted(() => {
    console.log('初始化echarts')
        chart = initChart()
        window.addEventListener('resize', function () {
            chart && chart.resize()
        })
    setTimeout(() => {
       
        chart.resize()
    }, 500);
  })

watch(()=>props.visible,(a, b) => {
    
   
}, { immediate: true })

// 定义子组件的方法
const updateEcharts = (data) => {
  console.log('子组件方法被调用',data);
  nodata.value = data.length === 0
nextTick(()=>{
    let X = []
 let Y = []

 for(let a of data)
 {
    X.push(new Date(a.createdTime).toLocaleTimeString())
    Y.push(a.degree)
 }


  chart.setOption({ // 更新图表
                                xAxis: {
                                    data: X
                                },
                                series: [{
                                    data: Y
                                }]
                        });
})


};
defineExpose({ updateEcharts})
</script>
<style lang="scss" scoped>
.echarts {
height: 100%;
width: 100%;
}
</style>
  